@import '~antd/es/style/variable.less';

html,
body,
#root {
  height: 100%;
  font-size: 16px;
}

#root {
  min-width: 1366px;
  min-height: 768px;
}

.colorWeak {
  filter: invert(80%);
}

.ant-layout {
  min-height: 100vh;
}

.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
  left: unset;
}

canvas {
  display: block;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul,
ol {
  list-style: none;
}

@media (max-width: @screen-xs) {
  .ant-table {
    width: 100%;
    overflow-x: auto;

    &-thead > tr,
    &-tbody > tr {
      > th,
      > td {
        white-space: pre;

        > span {
          display: block;
        }
      }
    }
  }
}

.mainStage {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: gray;

  .prevTask {
    position: absolute;
    top: 40%;
    left: 30px;
    width: 72px;
    height: 72px;
    background-image: url('../public/pics/buttons/left_clicked.png');
    opacity: 0.5;
    user-select: none;

    &:hover {
      cursor: pointer;
      opacity: 1;
    }
  }

  .nextTask {
    position: absolute;
    top: 40%;
    right: 30px;
    width: 72px;
    width: 72px;
    height: 72px;
    height: 72px;
    background-image: url('../public/pics/buttons/right_clicked.png');
    opacity: 0.5;
    user-select: none;

    &:hover {
      cursor: pointer;
      opacity: 1;
    }
  }

  .draw {
    height: 100% - 4.85rem;
    // overflow-x: scroll;
  }

  .pblock {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.55rem;
    background-color: white;
    user-select: none;

    .progress {
      width: 100%;
      margin: 0 auto;
      text-align: center;

      .progressBar {
        width: 15rem;

        :global {
          .ant-progress-inner {
            margin-top: 7px;
            vertical-align: top;
          }

          .ant-progress-inner,
          .ant-progress-outer {
            width: 15rem;
          }
        }
      }

      .progressDesc {
        margin-left: 10px;
        font-size: 15px;
        line-height: 40px;
      }
    }
  }
}

.rightSideBar {
  width: 330px;
  border-left: 4px solid #ddd;
}

// Compatible with IE11
@media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
  body .ant-design-pro > .ant-layout {
    min-height: 100vh;
  }
}

.ant-pro-top-nav-header-logo img {
  margin-left: 2.5rem;
}

.ant-pro-basicLayout .ant-layout-header.ant-pro-header-light,
.ant-pro-top-nav-header.light {
  background: @primary-color !important;
}

@media screen and(max-width: 1200px) {
  html,
  body,
  #root {
    font-size: 14px;
  }
}

.stage {
  background: none;

  :global(.konvajs-content) {
    margin: 0 auto;
  }
}

@import './styles/menu.less';
